"use client"

import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { useWallet } from "@/hooks/useWallet"
import WalletModal from "./wallet-modal"
import { formatAddress } from "@/utils/wallet"

export default function NavigationBar() {
  const [activeTab, setActiveTab] = useState("chat")
  const [isWalletModalOpen, setIsWalletModalOpen] = useState(false)
  const { connected, account, isConnecting, isWalletInstalled, connectWallet, disconnect, error } = useWallet()

  const handleWalletConnect = () => {
    setIsWalletModalOpen(true)
  }

  const handleWalletConnectConfirm = async () => {
    await connectWallet()
    if (!error) {
      setIsWalletModalOpen(false)
    }
  }

  return (
    <div className="bg-[#5f9ea0] w-full border-b-2 border-[#2f4f4f]">
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Logo and Text */}
          <div className="flex items-center">
            <Link href="/" className="flex items-center">
              <Image
                src="/images/pumproom-logo.png"
                alt="Pumproom Logo"
                width={32}
                height={32}
                className="h-8 w-8 mr-2"
              />
              <div className="flex flex-col">
                <span
                  className="text-white font-bold text-lg leading-tight tracking-wide"
                  style={{ fontFamily: "'MS Sans Serif', 'Microsoft Sans Serif', Arial, sans-serif" }}
                >
                  PUMPROOM
                </span>
                <span
                  className="text-white text-xs leading-tight tracking-wide"
                  style={{ fontFamily: "'MS Sans Serif', 'Microsoft Sans Serif', Arial, sans-serif" }}
                >
                  CHATROOM
                </span>
              </div>
            </Link>
          </div>

          {/* Navigation Links - Only Chat and Tokens now */}
          <div className="flex space-x-1">
            <NavButton label="Chat" isActive={activeTab === "chat"} onClick={() => setActiveTab("chat")} href="/" />
            <NavButton
              label="Tokens"
              isActive={activeTab === "tokens"}
              onClick={() => setActiveTab("tokens")}
              href="#"
            />
          </div>

          {/* User Actions */}
          <div className="flex items-center">
            {connected && account ? (
              <button
                className="win95-button bg-[#c0c0c0] text-black px-3 py-1 text-sm flex items-center"
                onClick={disconnect}
              >
                <span className="truncate max-w-[80px]">{formatAddress(account.solanaAddress)}</span>
              </button>
            ) : (
              <button onClick={handleWalletConnect} className="win95-button bg-[#c0c0c0] text-black px-3 py-1 text-sm">
                Connect Wallet
              </button>
            )}
          </div>
        </div>
      </div>

      {/* Wallet Connection Modal */}
      <WalletModal
        isOpen={isWalletModalOpen}
        onClose={() => setIsWalletModalOpen(false)}
        onConnect={handleWalletConnectConfirm}
        isWalletInstalled={isWalletInstalled}
        isConnecting={isConnecting}
        error={error}
      />
    </div>
  )
}

type NavButtonProps = {
  label: string
  isActive: boolean
  onClick: () => void
  href: string
}

function NavButton({ label, isActive, onClick, href }: NavButtonProps) {
  return (
    <Link href={href} onClick={onClick}>
      <div
        className={`px-3 py-1 text-sm ${
          isActive ? "win95-button bg-[#c0c0c0] text-black" : "text-white hover:bg-[#4a7a7c]"
        }`}
      >
        {label}
      </div>
    </Link>
  )
}
